<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="MplifeShareWeixinTitle" content=""/>
	<meta name="MplifeShareWeixinDesc" content=""/>
	<meta name="MplifeShareWeixinImageUrl" content=""/>
	<meta name="MplifeShareWeixinUrl" content=""/>
	<title>Tab切换 下拉刷新</title>
	<link type="text/css" rel="stylesheet" href="css/reset-min.css">
	<link type="text/css" rel="stylesheet" href="css/layout.css">
</head>
<body>
	<div class="mploading" style="display: none;"></div>
	<div class="viewpoint">
		<ul class="mstab clearfix">
			<li class="cur">今日秒杀</li>
			<li>明日预告</li>
		</ul>
		<div class="section">
			<!--今日秒杀-->
			<div class="sectionms bge" id="sectionms1">
				<div class="noshop" style="display:none"></div>
				<ul class="mslist" id="mslist1"></ul>
			</div>
			
			<!--明日预告-->
			<div class="sectionms hide bge" id="sectionms2">
				<div class="noshop" style="display:none"></div>
				<ul class="mslist" id="mslist2"></ul>
			</div>
		</div>	
	</div>


	<script src="https://mpimg.cn/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/dropload.min.js"></script>

	<script>
		//今日秒杀和明日预告 切换
		$(function(){
			var itemIndex = 0;
		    var counter1 = 0, counter2 = 0;
		    var tab1LoadEnd = false;
		    var tab2LoadEnd = false;
		    // tab
		    $('.mstab li').on('click',function(){
		        var $this = $(this);
		        itemIndex = $this.index();
		        $(this).addClass('cur').siblings('li').removeClass('cur');
		        $('.sectionms').addClass('hide').eq($(this).index()).removeClass('hide');

		        //隐藏暂无数据的图片
            	$('#sectionms1 .noshop, #sectionms2 .noshop').hide()
		        // 如果选中菜单一
		        if(itemIndex == '0'){
		        	$('#mslist2').empty();
		        	counter2 = 0;
		            // 如果数据没有加载完
		            if(!tab1LoadEnd){
		                // 解锁
		            	tab1LoadEnd = true;
		            	tab2LoadEnd = false;
		                dropload.unlock();
		                dropload.noData(false);
		            }else{
						return false;
		            }
		        // 如果选中菜单二
		        }else if(itemIndex == '1'){
		        	$('#mslist1').empty();
		        	counter1 = 0;
		            if(!tab2LoadEnd){
		                // 解锁
		            	tab2LoadEnd = true;
		            	tab1LoadEnd = false;
		                dropload.unlock();
		                dropload.noData(false);
		            }else{
						return false;
		            }
		        }
		        // 重置
		        dropload.resetload();
		    });
		
		    // 每页展示5个
		    var pagesize = 5;
		
		    // dropload
		    var dropload = $('.section').dropload({
		        scrollArea : window,
		        domUp : {
		            domClass   : 'dropload-up',
		            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
		            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
		            domLoad    : '<div class="dropload-load"><span class="refresh-loading"></span>加载中...</div>'
		        },
		        domDown : {
		            domClass   : 'dropload-down',
		            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
		            domLoad    : '<div class="dropload-load"><span class="refresh-loading"></span>加载中...</div>',
		            domNoData  : '<div class="dropload-noData">暂无数据</div>'
		        },
		        loadDownFn : function(me){
		            // 加载菜单一的数据
		            if(itemIndex == '0'){
		                $.ajax({
		                    type: 'GET',
		                    url: 'js/json.js',
		                    data: {page:counter1, pagesize: pagesize},
		                    dataType: 'json',
		                    success: function(data){
		                        var resultHtml = '';
		                        counter1++;
		                        if( data.lists.length > 0 ){
		                        	$.each(data.lists, function(key, value){
		                            	resultHtml += '<li class="clearfix">'
		    										 +'<div class="imglf fl">'
		    										 +'<a href="'+value.link+'">'
		    										 +'<p class="img1" style="background:url('+value.pic+') no-repeat 50% 50%;background-size:cover">'
		    										 +'<span>距结束还有 00:12:50</span>'
		    										 +'</p></a><p class="txt1">已抢50% <span class="progress fr"><em style="width:50%"></em></span></p>'
		    										 +'</div><div class="con1 fr"><a href=""><p class="t1 ellipsis">'+value.title+'</p>'
		    										 +'<p class="txt2 ellipsis">BLC果柔洗颜美容卸妆乳150ml</p><p class="msj">秒杀价 <span>¥159.00 </span> <em>¥ 500</em></p></a><div class="clearfix"><span class="mdf fl">'+value.date+'</span>a class="fr btn-qg bgf82946">抢购</a></div></div></li>';
		                            });
		                        }else{
		                            // 锁定
		                            me.lock();
		                            // 无数据
		                            me.noData();
		                        }
		
		                        // 为了测试，延迟1秒加载
		                        setTimeout(function(){
		                        	if( counter1 <= 1 ){
		                        		$('#mslist1').empty();
		                        	}
		                        	$('#mslist1').append(resultHtml);
		                        	$('#sectionms1').show()
		                        	if( resultHtml== '' ){//无数据，显示暂无数据的图片
			                        	$('#sectionms1 .noshop').show()
		                        	}
		                            // 每次数据加载完，必须重置
		                            me.resetload();
		                        },1000);
		                        
		                    },
		                    error: function(xhr, type){
		                    	console.log('Ajax error!');
		                        // 即使加载出错，也得重置
		                        me.resetload();
		                    }
		                });
		            // 加载菜单二的数据
		            }else if(itemIndex == '1'){
		                $.ajax({
		                    type: 'GET',
		                    url: 'js/json1.js',
		                    data: {page:counter1, pagesize: pagesize},
		                    dataType: 'json',
		                    success: function(data){
		                        var resultHtml = '';
		                        counter2++;
		                        if( data.lists.length > 0 ){
		                        	$.each(data.lists, function(key, value){
			                          	resultHtml += '<li class="clearfix">'
													 +'<div class="imglf fl">'
													 +'<a href="'+value.link+'">'
													 +'<p class="img1" style="background:url('+value.pic+') no-repeat 50% 50%;background-size:cover">'
													 +'<span>距结束还有 00:12:50</span>'
													 +'</p></a><p class="txt1">已抢50% <span class="progress fr"><em style="width:50%"></em></span></p>'
													 +'</div><div class="con1 fr"><a href=""><p class="t1 ellipsis">'+value.title+'</p>'
													 +'<p class="txt2 ellipsis">BLC果柔洗颜美容卸妆乳150ml</p><p class="msj">秒杀价 <span>¥159.00 </span> <em>¥ 500</em></p></a><div class="clearfix"><span class="mdf fl">'+value.date+'</span>a class="fr btn-qg bgf82946">抢购</a></div></div></li>';
		                        	})
		                        }else{
		                            // 锁定
		                            me.lock();
		                            // 无数据
		                            me.noData();
		                        }
		                        // 为了测试，延迟1秒加载
		                        setTimeout(function(){
		                        	if( counter2 <= 1 ){
		                        		$('#mslist2').empty();
		                        	}
		                        	$('#mslist2').append(resultHtml);
		                        	$('#sectionms2').show()
		                        	if( resultHtml== '' ){//无数据，显示暂无数据的图片
			                        	$('#sectionms2 .noshop').show()
		                        	}
		                            // 每次数据加载完，必须重置
		                            me.resetload();
		                        },1000);
		                    },
		                    error: function(xhr, type){
		                        console.log('Ajax error!');
		                        // 即使加载出错，也得重置
		                        me.resetload();
		                    }
		                });
		            }
		        }
		    });
		});
	</script>
</body>	
</html>
